// 收入成本差异报表
<template>
    <div class="wrap">

        <Row class="noRepor" v-if="costDiffDataType">
            <div>
                <p>当前月份还未生成报表</p>
                <Button type="primary" @click="toCostReportTime">点击生成</Button>
            </div>
        </Row>
        <Row class="reporBox" v-else>
            <Row class="reporHeader">
                <h3>平台收入成本差异报表</h3>
                <Col span="12">报表统计月份：{{ data[0] ? data[0].statistics_date : '' }}</Col>
                <Col class="textRight" span="12" >报表生成日期：{{ data[0] ? data[0].createdDt : '' }}</Col>
            </Row>
            <Table :columns="costColumn" :data="data" border :span-method="costDiffHandleSpan"></Table>
            <div class="remark">
                <div>备注：</div>
                <div>
                    <div>应收金额=当月合同生效订单销售净额</div>
                    <div>实收金额=当月合同生效订单支付净额</div>
                    <div>交易差异=应收金额-实收金额</div>
                    <div>核销金额=当月合同生效核销订单金额</div>
                    <div>平台服务费=SUM(合同生效核销金额*佣金率)</div>
                    <div>银行资金=核销金额数据对应的银行资金</div>
                    <div>资金差异=核销金额-银行资金</div>
                </div>
            </div>
        </Row>

    </div>
</template>

<script>
import {
    Button,
    DatePicker,
    Row,
    Col,
    Table,
    Message
} from "view-design";
import Authc from "@/components/Authc";
import util from '@/utils/util';

export default {
    name: "costDiffReport",
    components: {
        Button,
        Row,
        Col,
        Table,
        Authc,
        Message
    },
    props: {
        costDiffData: {
            type: Array,
            default: null
        },
        costDiffDataType: {
            type: Boolean,
            default: null
        }
    },
    data() {
        return {
            searchData: {},
            /** 表格头部配置 **/
            costColumn: [
                {
                    title: "项目清分",
                    align: "center",
                    // key: "q",
                    children: [
                        {
                            title: " ",
                            key: "project_type",
                            minWidth: 120,
                            align: 'center'
                        },
                        {
                            title: " ",
                            key: "project_name",
                            minWidth: 120,
                            align: 'center'
                        }
                    ]
                },
                {
                    title: "门票",
                    align: "center",
                    children: [
                        {
                            title: "自营",
                            key: "ticket_self",
                            minWidth: 100,
                            align: "center"

                        },
                        {
                            title: "平台",
                            key: "ticket_plat",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "清分",
                            key: "ticket_clearing",
                            minWidth: 100,
                            align: "center"
                        }
                    ]
                },
                {
                    title: "路线",
                    align: "center",
                    children: [
                        {
                            title: "自营",
                            key: "line_self",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "平台",
                            key: "line_plat",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "清分",
                            key: "line_clearing",
                            minWidth: 100,
                            align: "center"
                        }
                    ]
                },
                {
                    title: "机票",
                    align: "center",
                    children: [
                        {
                            title: "自营",
                            key: "flight_self",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "平台",
                            key: "flight_plat",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "清分",
                            key: "flight_clearing",
                            minWidth: 100,
                            align: "center"
                        }
                    ]
                },
                {
                    title: "酒店",
                    align: "center",
                    children: [
                        {
                            title: "自营",
                            key: "hotel_self",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "平台",
                            key: "hotel_plat",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "清分",
                            key: "hotel_clearing",
                            minWidth: 100,
                            align: "center"
                        }
                    ]
                },
                {
                    title: "租车",
                    align: "center",
                    children: [
                        {
                            title: "自营",
                            key: "charterer_self",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "平台",
                            key: "charterer_plat",
                            minWidth: 100,
                            align: "center"
                        },
                        {
                            title: "清分",
                            key: "charterer_clearing",
                            minWidth: 100,
                            align: "center"
                        }
                    ]
                }
            ],
            /** 表格数据**/
            data: []
        };
    },
    watch: {
        costDiffData (val) {
            this.data = this.costDiffData;
        }
    },
    created() {
    },
    methods: {
        toCostReportTime () {
            this.$emit('getCostReportTime', '1');
        },
        /**
         * @param { row } 当前行
         * @param { column } 当前列
         * @param { rowIndex } 当前行索引
         * @param { columnIndex } 当前列索引
         * **/
        costDiffHandleSpan({ row, column, rowIndex, columnIndex }) {
            let settlementIndex = 0; /** 流水差异原因 */
            let clearIndex = 0; /** 清分差异原因 */
            for (let i in this.data) {
                if (this.data[i].project_type == '流水差异类型') {
                    settlementIndex = settlementIndex++ + 1;
                }
                if (this.data[i].project_type == '清分差异类型') {
                    clearIndex = clearIndex++ + 1;
                }
            } 

            /**
             * 控制 表格项目类的 行合并
             * return [1, 2]， 1：表示行数， 2：表示列数
             * 这里表示合并  1行，2 列
             *  **/
            if (rowIndex < 3 && columnIndex === 0) {
                return [0, 0];
            } else if (rowIndex < 3 && columnIndex === 1) {
                return [1, 2];
            }
            
            if (settlementIndex) { /** 判断是否有流水----动态项 */
                /** 流水差异原因配置---需动态 */
                if (rowIndex === 3 && columnIndex === 0) {
                    return [settlementIndex, 1]; 
                } else if (rowIndex === 3 && columnIndex === 1) {
                    return [1, 1];
                }
            }

            // /** 合并行1，2项 */
            if ((rowIndex >= settlementIndex + 3 && rowIndex < settlementIndex + 3 + 4) && columnIndex === 0) {
                return [0, 0]
            } else if ((rowIndex >= settlementIndex + 3 && rowIndex < settlementIndex + 3 + 4) && columnIndex === 1) {
                return [1, 2]
            }

            /** 清分差异原因配置===需动态 */
            if (clearIndex) {
                if (rowIndex === (settlementIndex + 3 + 4) && columnIndex === 0) {
                    return [clearIndex, 1];
                } else if (rowIndex === (settlementIndex + 3 + 4) && columnIndex === 1) {
                    return [1, 1];
                }
            }

            /** 无交易订单银行流水 settlementIndex + clearIndex + 3 + 4 */
            if ((rowIndex >= settlementIndex + clearIndex + 3 + 4) && columnIndex === 0) {
                return [0, 0]
            } else if ((rowIndex >= settlementIndex + clearIndex + 3 + 4) && columnIndex === 1) {
                return [1, 2]
            } else if ((rowIndex >= settlementIndex + clearIndex + 3 + 4) && columnIndex === 2) {
                return [1, 2]
            } else if ((rowIndex >= settlementIndex + clearIndex + 3 + 4) && columnIndex >= 3) {
                return [0, 0]
            }

            if (((rowIndex >= 3 && rowIndex < 3 + settlementIndex) || (rowIndex >= (settlementIndex + 3 + 4))) && columnIndex === 0) {
                return [0, 0]
            }
        },
    }
};
</script>

<style lang="less" scoped>
    .wrap {
        .noRepor {
            // text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 600px;
            div {
                text-align: center;
                p{
                    font-weight: bold;
                }
            }
        }
        .reporBox {
            .remark {
                display: flex;
                justify-content: left;
                background: #eee;
                padding: 16px;
                margin-top: 16px;
                max-width: 40%;
            }
        }
    }
</style>
